import React, {useEffect} from 'react'
import {Form, Button, Modal, Row, Col, Input } from 'antd'
import {connect} from 'umi'
const FormItem = Form.Item;
const { TextArea } = Input;
const ImportUser = (props) => {

  const {onSubmit, onCancel, visible,loading} = props;
  const [form] = Form.useForm();

  const onFormCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    onSubmit({
      ...fieldsValue,
    });
  };

  const renderFooter = () => {
    return (
      <>
        <Button type="primary" loading={loading} onClick={() => handleSubmit()}>保存</Button>
        <Button onClick={() => onFormCancel()}>关闭页面</Button>
      </>
    )
  };

  return (
    <Modal
      width={'70%'}
      title='导入用户信息'
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
    >
      <Form form={form} style={{ paddingTop: '24px' }}>
        <Row gutter={24}>
          <Col span={24}>
            <FormItem name="codes" label="用户工号" extra='支持多个导入，用 , 号分割' rules={[{required: true, message: '用户工号不能为空'}]}>
              <TextArea rows={6}/>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
};


export default connect(() => ({

}))(ImportUser)
